<template>
    <div class="app-container">
        <!--        <el-descriptions title="书籍详情" :column="2" :size="''" border>-->
<!--            <el-descriptions-item label="封面">-->
<!--                <img v-if="form.picture" :src="form.picture" alt="Cover Image" class="book-cover" />-->
<!--            </el-descriptions-item>-->
<!--            <el-descriptions-item label="简介">-->
<!--                <div v-if="form.information">{{ form.information }}</div>-->
<!--            </el-descriptions-item>-->
<!--        </el-descriptions>-->
<!--        <el-descriptions :column="2" :size="''" border>-->
<!--            <el-descriptions-item label="类别" width="70px">-->
<!--                <div>{{ form.categoryId }}</div>-->
<!--            </el-descriptions-item>-->
<!--            <el-descriptions-item label="ISBN">-->
<!--                <div>{{ form.bookIsbn }}</div>-->
<!--            </el-descriptions-item>-->
<!--            <el-descriptions-item label="书名">-->
<!--                <div>{{ form.bookName }}</div>-->
<!--            </el-descriptions-item>-->
<!--            <el-descriptions-item label="出版社">-->
<!--                <div>{{ form.bookPublisher }}</div>-->
<!--            </el-descriptions-item>-->
<!--            <el-descriptions-item label="作者">-->
<!--                <div>{{ form.bookAuthor }}</div>-->
<!--            </el-descriptions-item>-->
<!--            <el-descriptions-item label="出版日期">-->
<!--                <div>{{ parseTime(form.bookPublishingyear, '{y}-{m}-{d}') }}</div>-->
<!--            </el-descriptions-item>-->
<!--            <el-descriptions-item label="库存">-->
<!--                <div>{{ form.bookInventory }}</div>-->
<!--            </el-descriptions-item>-->
<!--        </el-descriptions>-->
        <div class="dialog-vertical">
            <div  class="app-container">
                <el-form>
                    <el-row class="row-bordered">
                        <el-col :span="1"></el-col>
                        <el-col :span="1">封面</el-col>
                        <el-col :span="22">
                            <img v-if="form.picture" :src="form.picture" alt="Cover Image" class="book-cover" />
                        </el-col>
                    </el-row>
                    <el-row class="row-bordered">
                        <el-col :span="1"></el-col>
                        <el-col :span="1">简介</el-col>
                        <el-col :span="21">
                            <div v-if="form.information">{{ form.information }}</div>
                        </el-col>
                    </el-row>
                    <el-row class="row-bordered">
                        <el-col :span="1"></el-col>
                        <el-col :span="1">类别</el-col>
                        <el-col :span="10">
                            <div>{{ form.categoryId }}</div>
                        </el-col>
                        <el-col :span="2">ISBN</el-col>
                        <el-col :span="10">
                            <div>{{ form.bookIsbn }}</div>
                        </el-col>
                    </el-row>
                    <el-row class="row-bordered">
                        <el-col :span="1"></el-col>
                        <el-col :span="1">书名</el-col>
                        <el-col :span="10">
                            <div>{{ form.bookName }}</div>
                        </el-col>
                        <el-col :span="2">出版社</el-col>
                        <el-col :span="10">
                            <div>{{ form.bookPublisher }}</div>
                        </el-col>
                    </el-row>
                    <el-row class="row-bordered">
                        <el-col :span="1"></el-col>
                        <el-col :span="1">作者</el-col>
                        <el-col :span="10">
                            <div>{{ form.bookAuthor }}</div>
                        </el-col>
                        <el-col :span="2">出版日期</el-col>
                        <el-col :span="10">
                            <div>{{ parseTime(form.bookPublishingyear, '{y}-{m}-{d}') }}</div>
                        </el-col>
                    </el-row>
                    <el-row class="row-bordered">
                        <el-col :span="1"></el-col>
                        <el-col :span="1">库存</el-col>
                        <el-col :span="10">
                            <div>{{ form.bookInventory }}</div>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
        </div>
        <div class="dialog-vertical">
            <el-row>
                <div class="divClass"><b>书籍预约情况</b></div>
            </el-row>
            <div class="app-container">
<!--                表格展示预约情况-->
                <el-table v-loading="loading" :data="orderList">
                    <el-table-column label="订单编号" align="center" prop="orderId" />
                    <el-table-column label="类别" align="center" prop="categoryId" />
                    <el-table-column label="图书编号" align="center" prop="bookId" />
                    <el-table-column label="预约时间" align="center" prop="orderTime" width="180">
                        <template #default="scope">
                            <span>{{ parseTime(scope.row.orderTime, '{y}-{m}-{d}') }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="预约起始时间" align="center" prop="orderBeginTime" width="180">
                        <template #default="scope">
                            <span>{{ parseTime(scope.row.orderBeginTime, '{y}-{m}-{d}') }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="预约结束时间" align="center" prop="orderFinishTime" width="180">
                        <template #default="scope">
                            <span>{{ parseTime(scope.row.orderFinishTime, '{y}-{m}-{d}') }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="是否出库" align="center" prop="orderIsout" />
                    <el-table-column label="出库时间" align="center" prop="orderOuttime" width="180">
                        <template #default="scope">
                            <span>{{ parseTime(scope.row.orderOuttime, '{y}-{m}-{d}') }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="是否入库" align="center" prop="orderIsin" />
                    <el-table-column label="入库时间" align="center" prop="orderIntime" width="180">
                        <template #default="scope">
                            <span>{{ parseTime(scope.row.orderIntime, '{y}-{m}-{d}') }}</span>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <el-button type="primary" icon="Plus" v-hasPermi="['book:book:query']" @click="handleOrder">点击预约此书</el-button>
<!--        <div>-->
<!--            <comment>-->
<!--            </comment>-->
<!--        </div>-->
    </div>
        <!-- ----------对话框 -->
        <el-dialog :title="选择预约时间" v-model="open" width="500px" append-to-body>
            <el-form ref="orderRef" :model="form" :rules="rules" label-width="180px">
                <el-form-item label="预约起始时间" prop="orderBeginTime">
                    <el-date-picker clearable
                                    v-model="form.orderBeginTime"
                                    type="date"
                                    value-format="YYYY-MM-DD"
                                    placeholder="请选择起始日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="预约结束时间" prop="orderFinishTime">
                    <el-date-picker clearable
                                    v-model="form.orderFinishTime"
                                    type="date"
                                    value-format="YYYY-MM-DD"
                                    placeholder="请选择结束日期">
                    </el-date-picker>
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button type="primary" @click="submitOrder">确 定</el-button>
                    <el-button @click="cancel">取 消</el-button>
                </div>
            </template>
        </el-dialog>

        <comment></comment>
        </div>
</template>

<script setup name="information">
import {listBook, getBook, delBook, addBook, updateBook} from "@/api/book/book";
import {addInformation, getInformation, getInformationByIsbn} from "@/api/information/information";
// 查询预约情况方法
import {getOrderBybookId,getOrder,listOrder,addOrder} from "@/api/order/order";
import {parseTime} from "@/utils/ruoyi.js";
import {useRoute} from "vue-router";
import * as https from "https";
import {getUserProfile} from "@/api/system/user.js";
import {getData} from "@/api/system/dict/data.js";
import comment from "@/views/comment/comment/index.vue";

const { proxy } = getCurrentInstance();

const bookList = ref([]);
const orderList = ref([]);
const loading = ref(true);
const showSearch = ref(true);
const ids = ref([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);
const title = ref("");
const route = useRoute();
let exists = ref([]);
const open = ref(false);

const data = reactive({
    form: {},
    queryParams: {
        bookId:null,
        categoryId: null,
        bookIsbn: null,
        bookName: null,
        bookPublisher: null,
        bookAuthor: null,
        bookPublishingyear: null,
        bookInventory: null,
        bookPrice: null,
    },
    qu: {
        bookId:null,
        categoryId: null,
        readerId:null,
        orderTime:null,
        orderBeginTime:null,
        orderFinishTime:null,
        orderIsout:null,
        orderIsin:0
    },
    rules: {
        orderBeginTime: [
            { required: true, message: "预约起始时间不能为空", trigger: "blur" }
        ],
        orderFinishTime: [
            { required: true, message: "预约结束时间不能为空", trigger: "blur" }
        ]
    }
});

const { queryParams, form, rules,qu } = toRefs(data);

/** 查询图书列表 */
function getList() {
    loading.value = true;
    listBook(queryParams.value).then(response => {
        bookList.value = response.rows;
        total.value = response.total;
        loading.value = false;
    });
}

function getInfo(bookId,bookIsbn) {
    console.info(bookIsbn)
    console.info(bookId)
    form.value.bookId=bookId;
    getBook(bookId).then(response => {
        console.info(response);
        form.value.bookIsbn=response.data.bookIsbn;
        form.value.categoryId=response.data.categoryId;
        form.value.bookName=response.data.bookName;
        form.value.bookPublisher=response.data.bookPublisher;
        form.value.bookAuthor=response.data.bookAuthor;
        form.value.bookPublishingyear=response.data.bookPublishingyear;
        form.value.bookInventory=response.data.bookInventory;
        getList();
    });
    getInformationByIsbn(bookIsbn).then(response => {
        console.info(response)
        form.value.information=response.information;
        form.value.picture=response.picture;
        getList();
    });
    // // 新增查询预约
    queryParams.value.bookId = bookId;
    listOrder(queryParams.value).then(response => {
        console.info(response)
        // 过滤掉 orderIsin=0 的行
        orderList.value = response.rows.filter(item => item.orderIsin == 0);

        // 设置总数（根据过滤后的列表）
        total.value = orderList.value.length;
        // 检查是否存在满足条件的行
        getUserProfile().then(response => {
            const thereaderId = response.data.userId;
            exists = orderList.value.some(item => item.readerId === thereaderId);
            console.log("是否存在满足条件的行：", exists);
        });
    });

}

//预约请求
function handleOrder(){
    if(exists) {
        proxy.$alert("您已预约此书")
    }else{
        // 弹出表单
        // reset();
        open.value = true;
    }
}
// 提交预约记录
function submitOrder() {
    proxy.$refs["orderRef"].validate(valid => {
        if(valid) {
            // 获取图书信息
            const bookId = route.params.bookId;
            const bookIsbn = route.params.bookIsbn;
            getBook(bookId).then(response => {
                qu.value.categoryId = response.data.categoryId;
            });
            // 获取读者信息
            getUserProfile().then(response => {
                qu.value.readerId = response.data.userId;
                // 获取其他信息
                var getTime = new Date().getTime(); //获取到当前时间戳
                var time = new Date(getTime); //创建一个日期对象
                function nowDate(time) {
                    var year = time.getFullYear(); // 年
                    var month = (time.getMonth() + 1).toString().padStart(2, '0'); // 月
                    var date = time.getDate().toString().padStart(2, '0'); // 日
                    return (
                        year + "-" + month + "-" + date
                    )
                }
                qu.value.orderTime = nowDate(time);
                qu.value.orderBeginTime = form.value.orderBeginTime;
                qu.value.orderFinishTime = form.value.orderFinishTime;
                qu.value.bookId = bookId;
                qu.value.orderIsin = 0;
                qu.value.orderIsout = 0;
                // console.info(qu.value.categoryId)
                // console.info(qu.value.bookId)
                // console.info(qu.value.readerId)
                // console.info(qu.value.orderTime)
                // console.info(qu.value.orderBeginTime)
                // console.info(qu.value.orderFinishTime)
                // console.info(qu.value.orderIsout)
                // console.info(qu.value.orderIsin)
                addOrder(qu.value).then(response => {
                    proxy.$modal.msgSuccess("预约成功");
                })
                open.value = false;
            });
            getInfo(bookId,bookIsbn);
        }
    });
}

// 取消按钮
function cancel() {
    open.value = false;
    resetOrder();
    const bookId = route.params.bookId;
    const bookIsbn = route.params.bookIsbn;
    getInfo(bookId,bookIsbn);
}
// 表单重置
function resetOrder() {
    form.value = {
        orderBeginTime:null,
        orderFinishTime:null
    };
    proxy.resetForm("orderRef");
}

// 表单重置
function reset() {
    form.value = {
        bookId: null,
        categoryId: null,
        bookIsbn: null,
        bookName: null,
        bookPublisher: null,
        bookAuthor: null,
        bookPublishingyear: null,
        bookInventory: null,
        bookPrice: null,
        information: null,
        picture: null
    };
    proxy.resetForm("bookRef");
}

getInfo(route.params && route.params.bookId,route.params && route.params.bookIsbn)
</script>

<style scoped>
.divClass{
    width: 100%;
    height: 40px;
    background-color: #bfbfbf ;
    text-align: center;
    line-height: 40px;
    color: #333333;
}
.row-bordered {
    border: 1px solid black;
}
.book-cover {
    width: 100px; /* 或者你想要的尺寸 */
}
.dialog-vertical{
    padding:20px 50px 50px 50px;
}
</style>
